import { AlertFilled } from '@ant-design/icons'
import { CommonSmallTitle } from '../../Common/Other/SmallTitle'
import { Badge, message } from 'antd'
import { useState, useEffect } from 'react'
import { useBoolean, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'

export const CommandSoS = ({ SOSMapAddress }) => {
    const { runAsync: posHelmetSoSUpdateIsEnabled } = useRequest(Http, { manual: true })
    const [SOSListStatus, { setTrue, setFalse }] = useBoolean(false)
    const [SOSList, setSOSList] = useState([])

    const { runAsync: getHelmetSoS } = useRequest(Http, {
        manual: true,
        pollingInterval: 5000,
        pollingWhenHidden: false,
        onSuccess: res => setSOSList([...res.list]),
    })
    useEffect(() => {
        getHelmetSoS({ url: 'getHelmetSoS', data: { isEnabled: 0, pageSize: 10000, pageIndex: 1 } })
    }, [getHelmetSoS])

    return (
        <div
            className="CommandSoS"
            onClick={() => {
                if (SOSList.length !== 0) setTrue()
            }}
        >
            <Badge count={SOSList.length}>
                <AlertFilled style={{ color: 'red' }} />
            </Badge>
            {SOSListStatus && (
                <div className="SOSList">
                    <CommonSmallTitle className="ItemTitle" title="SOS求救列表" flex={1}>
                        <div className="SOSListBox">
                            <div>
                                <div>报警编号</div>
                                <div>报警信息</div>
                                <div>操作</div>
                            </div>
                            <div>
                                {SOSList.map(({ uuid, personName, tableName, organizationName, code, lat, lng }) => (
                                    <div key={uuid}>
                                        <div>{code}</div>
                                        <div>
                                            {organizationName} - {personName}
                                        </div>
                                        <div>
                                            <div
                                                onClick={e => {
                                                    e.stopPropagation()
                                                    SOSMapAddress.emit({
                                                        type: 1,
                                                        id: uuid,
                                                        position: [lng, lat, 0],
                                                        name: `${organizationName} - ${personName}`,
                                                    })
                                                }}
                                            >
                                                定位
                                            </div>
                                            <div
                                                onClick={e => {
                                                    e.stopPropagation()
                                                    posHelmetSoSUpdateIsEnabled({
                                                        url: 'posHelmetSoSUpdateIsEnabled',
                                                        path: [uuid],
                                                    })
                                                        .then(() => {
                                                            SOSMapAddress.emit({ type: 2, id: uuid })
                                                            message.success('SOS报警信息处置成功!')
                                                        })
                                                        .catch(() => message.error('SOS报警信息处置失败!请重试'))
                                                }}
                                            >
                                                处置
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                            <div>
                                <div>数据总数 {SOSList.length}条</div>
                                <div
                                    onClick={e => {
                                        e.stopPropagation()
                                        setFalse()
                                    }}
                                >
                                    收起列表
                                </div>
                            </div>
                        </div>
                    </CommonSmallTitle>
                </div>
            )}
        </div>
    )
}
